---
title: <OrganizationSettingsCards />
---

The `<OrganizationSettingsCards />` component provides a comprehensive set of cards for managing organization settings, including organization details, logo, and deletion options.

## Usage

```tsx
import { OrganizationSettingsCards } from '@daveyplate/better-auth-ui'

export function OrganizationSettingsPage() {
  return (
    <OrganizationSettingsCards />
  )
}
```

## Features

- **Organization Logo**: Upload and manage organization logo
- **Organization Name**: Update organization name
- **Organization Slug**: Update organization slug/identifier
- **Delete Organization**: Delete the organization (owner only)

## Reference

<AutoTypeTable path="../src/components/organization/organization-settings-cards.tsx" name="OrganizationSettingsCardsProps" />

## Examples

### Basic Usage

```tsx
<OrganizationSettingsCards />
```

### With Custom Class Names

```tsx
<OrganizationSettingsCards 
  classNames={{
    cards: "gap-8",
    card: {
      base: "shadow-lg",
      title: "text-2xl",
      button: "rounded-full"
    }
  }}
/>
```

### With Custom Localization

```tsx
<OrganizationSettingsCards 
  localization={{
    ORGANIZATION_NAME: "Team Name",
    ORGANIZATION_SLUG: "Team URL",
    DELETE_ORGANIZATION: "Delete Team"
  }}
/>
```

## Included Cards

### Organization Logo Card
- Upload custom organization logo
- Delete existing logo
- Automatic image resizing and cropping
- Support for custom upload functions

### Organization Name Card
- Update organization display name
- Real-time validation
- Permission-based access control

### Organization Slug Card
- Update organization URL identifier
- Slug format validation (lowercase, hyphens)
- Uniqueness checking

### Delete Organization Card
- Owner-only access
- Confirmation dialog
- Automatic cleanup of related data

## Requirements

The organization plugin must be enabled with proper configuration:

```tsx title="providers.tsx"
<AuthUIProvider
  authClient={authClient}
  organization={{
    logo: {
      upload: async (file) => {
        // Your upload logic
        return uploadedUrl
      },
      delete: async (url) => {
        // Optional: clean up your storage/CDN on delete
        await myCdn.delete(url)
      },
      size: 256,
      extension: "png"
    }
  }}
>
  {children}
</AuthUIProvider>
```

## Permissions

- **View Settings**: All organization members
- **Update Name/Slug**: Admin and Owner roles
- **Upload Logo**: Admin and Owner roles
- **Delete Organization**: Owner role only 